<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
      label-position="top">
      <el-form-item class="title" label="coach text" prop="field101">
        <el-input  v-model="formData.field101" type="textarea" placeholder="请输入coach text"
          :autosize="{minRows: 1, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="timestamp" prop="field102">
        <el-time-picker v-model="formData.field102" is-range format="HH:mm:ss" value-format="HH:mm:ss"
          :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至"
          clearable></el-time-picker>
      </el-form-item>
      <el-form-item label="category" prop="field103">
        <el-select v-model="formData.field103" placeholder="请选择category" clearable :style="{width: '100%'}">
          <el-option v-for="(item, index) in field103Options" :key="index" :label="item.label"
            :value="item.value" :disabled="item.disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="problem type" prop="field104">
        <el-checkbox-group v-model="formData.field104" size="medium">
          <el-checkbox v-for="(item, index) in field104Options" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="body parts" prop="field105">
        <el-cascader v-model="formData.field105" :options="field105Options" :props="field105Props"
          :style="{width: '100%'}" placeholder="请选择body parts" clearable></el-cascader>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <h2> rewrite shown here</h2>
    <template v-if="reWriteData.oldfield101.length === 0">
      <p>coach text:  no files </p>
      <p>timestamp:  no files </p>
      <p>category:  no files </p>
      <p>problem type:  no files </p>
      <p>body parts:  no files </p>
    </template>
    <template v-if="reWriteData.oldfield101.length !== 0">
    <p>coach text: {{ reWriteData.oldfield101 }}</p>
    <p>timestamp: {{ reWriteData.oldfield102 }}</p>
    <p>category: {{ reWriteData.oldfield103 }}</p>
    <p>problem type: {{ reWriteData.oldfield104 }}</p>
    <p>body parts: {{ reWriteData.oldfield105 }}</p>
    </template>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  props: [],
  data() {
    return {
      reWriteData:{
        oldfield101: [],
        oldfield102: [],
        oldfield103: [],
        oldfield104: [],
        oldfield105: [],
      },
      formData: {
        field101: undefined,
        field102: null,
        field103: undefined,
        field104: [],
        field105: [],
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入coach text',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: 'timestamp不能为空',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: '请选择category',
          trigger: 'change'
        }],
        field104: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field104',
          trigger: 'change'
        }],
        field105: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field105',
          trigger: 'change'
        }],
      },
      field103Options: [{
        "label": "Basketball",
        "value": "sport1"
      }, {
        "label": "Badminton",
        "value": "sport2"
      }, {
        "label": "Table tennis",
        "value": "sport3"
      }, {
        "label": "Tennis",
        "value": "sport4"
      }, {
        "label": "Swimming",
        "value": "sport5"
      }, {
        "label": "Fitness",
        "value": "sport6"
      }],
      field104Options: [{
        "label": "Nonstandard action",
        "value": "problem1"
      }, {
        "label": "Wrong technique",
        "value": "problem2"
      }, {
        "label": "lacking in strength",
        "value": "problem3"
      }],
      field105Options: [{
        "label": "left-arm",
        "value": "part1",
        "id": 114,
        "children": [{
          "label": "left_elbow",
          "value": 13,
          "id": 119
        }, {
          "label": "left_wrist",
          "value": 15,
          "id": 120
        }, {
          "label": "left_pinky",
          "value": 17,
          "id": 121
        }, {
          "label": "left_index",
          "value": 19,
          "id": 122
        }, {
          "label": "left_thumb",
          "value": 21,
          "id": 123
        }]
      }, {
        "label": "right-arm",
        "value": "part2",
        "id": 115,
        "children": [{
          "label": "right_elbow",
          "value": 14,
          "id": 124
        }, {
          "label": "right_wrist",
          "value": 16,
          "id": 125
        }, {
          "label": "right_pinky",
          "value": 18,
          "id": 126
        }, {
          "label": "right_index",
          "value": 20,
          "id": 127
        }, {
          "label": "right_thumb",
          "value": 22,
          "id": 128
        }]
      }, {
        "label": "body",
        "value": "part3",
        "id": 116,
        "children": [{
          "label": "left_shoulder",
          "value": 11,
          "id": 129
        }, {
          "label": "right_shoulder",
          "value": 12,
          "id": 130
        }, {
          "label": "left_hip",
          "value": 23,
          "id": 131
        }, {
          "label": "right_hip",
          "value": 24,
          "id": 132
        }]
      }, {
        "label": "left-leg",
        "value": "part4",
        "id": 117,
        "children": [{
          "label": "left_knee",
          "value": 25,
          "id": 133
        }, {
          "label": "left_ankle",
          "value": 27,
          "id": 134
        }, {
          "label": "left_heel",
          "value": 29,
          "id": 135
        }, {
          "label": "left_foot_index",
          "value": 31,
          "id": 136
        }]
      }, {
        "label": "right-leg",
        "value": "part5",
        "id": 118,
        "children": [{
          "label": "right_knee",
          "value": 26,
          "id": 137
        }, {
          "label": "right_ankle",
          "value": 28,
          "id": 138
        }, {
          "label": "right_heel",
          "value": 30,
          "id": 139
        }, {
          "label": "right_foot_index",
          "value": 32,
          "id": 140
        }]
      }],
      field105Props: {
        "multiple": false
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const path = '/mypath'
        axios.post(path,{
        coachtext:this.formData.field101,
        timeStamps:this.formData.field102,
        category:this.formData.field103,
        problemType:this.formData.field104,
        bodyParts:this.formData.field105,
        }).then(response=>{
          if (response.data.status === 'success'){
              console.log(response.data.status);
            }else{
              console.log('error in POST')
            }

            //101 每次只保留一条，新的会覆盖旧的
            //this.reWriteData.oldfield101 = response.data.response_data.coachtext
            //写入数组，每条都会保留
            this.pushData(response.data.response_data.coachtext,this.reWriteData.oldfield101);
            
            //102 每次只保留一条，新的会覆盖旧的
            //this.reWriteData.oldfield102 = response.data.response_data.timeStamps
            //写入数组，每条都会保留
            this.pushData(response.data.response_data.timeStamps,this.reWriteData.oldfield102);
            
            //103 每次只保留一条，新的会覆盖旧的
            //this.reWriteData.oldfield103 = response.data.response_data.category
            //const categoryLabel = this.field103Options.find(option => option.value === this.reWriteData.oldfield103).label;
            //this.reWriteData.oldfield103 = categoryLabel;
            //console.log(this.reWriteData.oldfield103)
            //写入数组，每条都会保留
            const categoryLabel = this.field103Options.find(option => option.value === response.data.response_data.category).label;
            this.pushData(categoryLabel,this.reWriteData.oldfield103);
           
            //104 每次只保留一条，新的会覆盖旧的
            //this.reWriteData.oldfield104 = response.data.response_data.problemType
            // const problemTypeLabels = this.reWriteData.oldfield104.map((value) => {
            //   const option = this.field104Options.find((option) => option.value === value);
            //   return option ? option.label : null;
            // });
            // this.reWriteData.oldfield104 = problemTypeLabels;
            // console.log(this.reWriteData.oldfield104)
            //写入数组，每条都会保留
            const problemTypeLabels = response.data.response_data.problemType.map((value) => {
              const option = this.field104Options.find((option) => option.value === value);
              return option ? option.label : null;
            });
            this.pushData(problemTypeLabels,this.reWriteData.oldfield104);


            //105 每次只保留一条，新的会覆盖旧的
            //this.reWriteData.oldfield105 = response.data.response_data.bodyParts
            // const bodyPartLabel = this.field105Options.find((option) => option.value === this.reWriteData.oldfield105[0]).label;
            // const bodyPartChild = this.field105Options.find((option) => option.value === this.reWriteData.oldfield105[0]).children.find((child) => child.value === this.reWriteData.oldfield105[1]).label;
            // this.reWriteData.oldfield105 = `${bodyPartLabel} -- ${bodyPartChild}`;
            // console.log(this.reWriteData.oldfield105)
            //写入数组，每条都会保留
            const bodyPartLabel = this.field105Options.find((option) => option.value === response.data.response_data.bodyParts[0]).label;
            const bodyPartChild = this.field105Options.find((option) => option.value === response.data.response_data.bodyParts[0]).children.find((child) => child.value === response.data.response_data.bodyParts[1]).label;
            this.pushData(`${bodyPartLabel} -- ${bodyPartChild}`,this.reWriteData.oldfield105);

        }).catch(err =>{
          console.log(err);
        });
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    pushData(newData,fieldNum){
      if(fieldNum.length == 0){
        fieldNum.push(newData);
      }else{
        fieldNum.splice(fieldNum.length,0,newData)
      }
    },
  }
}

</script>

<style lang="scss" scoped>
// .title{
//   font-family: 'Times New Roman', Times, serif;
// }
</style>



